<template>
  <!-- 点击查询 -->
  <div class="building-container">
    <el-form ref="form" label-width="80px">
      <el-row style="border-bottom: 1.5px solid #f4f6f8;">
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <el-form-item label="楼宇名称">
              <el-input v-model="buildName" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="14" style="margin-left: -60px !important;">
          <div class="grid-content bg-purple-light"> <el-form-item>
            <el-button type="primary" @click.prevent="submit">查询</el-button>
          </el-form-item></div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 按钮 -->
    <div>
      <el-row style="margin-top: 10px;">
        <el-button type="primary" @click="addBuild('add')">添加楼宇</el-button>
      </el-row>
    </div>

    <!-- 列表 -->
    <div>
      <el-row>
        <el-table
          style="width: 100%"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
          />
          <el-table-column
            prop="name"
            label="楼宇名称"
            width="180"
          />
          <el-table-column
            prop="floors"
            label="层数"
          />
          <el-table-column
            prop="area"
            label="在管面积(m²)"
            width="120"
          />
          <el-table-column
            prop="propertyFeePrice"
            label="物业费(元/m²)"
            width="120"
          />
          <el-table-column
            prop="date"
            label="状态"
            width="120"
          >
            <template #default="{row}">
              {{ row.status===1?'闲置中':'租赁中' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="操作"
          >
            <template #default="{row}">
              <el-link type="primary" @click="editBuild('edit',row.id)"> 编辑</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-link type="primary" @click="del(row.id)">删除</el-link>
            </template>

          </el-table-column>

        </el-table>
      </el-row>
      <div class="block">
        <el-pagination
          :page-sizes="[10,20,30,40,50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <div class="dialog">
        <el-form ref="formBuild" :model="form" :rules="rules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="form.floors" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="form.area" />
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="form.propertyFeePrice" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="submitDialog">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      custom-class="“class1”"
      :visible.sync="Visible"
      :show-close="false"
      width="400px"
    >
      <div>
        <span><i class="el-icon-warning" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是否删除当钱楼宇?</span>
      </div>
      <span slot="footer">
        <el-button @click="DialogTwo">取 消</el-button>
        <el-button type="primary" @click="delSubmitTwo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addList, delList, editList, editListSub } from '@/api/building'
export default {
  name: 'BuildingPage',
  data() {
    return {
      idTwo: '',
      Visible: false,
      type: '',
      buildName: '',
      page: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      dialogVisible: false,
      form: {
        id: '',
        name: '',
        floors: '',
        propertyFeePrice: '',
        area: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' },
          { min: 1, max: 20, message: '请输入1-20楼宇层数', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入在管面积', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入物业费', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      if (this.type === 'add') {
        return '添加'
      } else {
        return '编辑'
      }
    }
  },
  created() {
    this.submit()
  },
  methods: {
    DialogTwo() {
      this.Visible = false
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.submit()
    },
    async submit() {
      const res = await getList({
        name: this.buildName,
        page: this.page,
        pageSize: this.pageSize
      })
      // console.log(res)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    // 点击跳转页面
    handleCurrentChange(val) {
      // console.log(val)
      this.page = val
      this.submit()
    },
    // 点击添加楼宇
    addBuild(type) {
      this.type = type
      this.dialogVisible = true
    },
    // 点击编辑楼宇
    async  editBuild(type, id) {
      this.dialogVisible = true
      this.type = type
      const res = await editList(id)
      this.form = res.data
    },
    closeDialog(type, id) {
      this.dialogVisible = false
      this.$refs.formBuild.resetFields()
    },
    async submitDialog() {
      this.$refs.formBuild.validate(async(valid) => {
        if (!valid) return
        if (this.type === 'add') {
          await addList({
            name: this.form.name,
            floors: +this.form.floors,
            propertyFeePrice: +this.form.propertyFeePrice,
            area: +this.form.area
          })
          // 添加成功
          this.$message.success('添加成功')
        } else {
          await editListSub({
            id: this.form.id,
            name: this.form.name,
            floors: +this.form.floors,
            propertyFeePrice: +this.form.propertyFeePrice,
            area: +this.form.area
          })
          // 添加成功
          this.$message.success('编辑成功')
        }
        this.dialogVisible = false
        this.submit()
      })
    },
    // 点击删除
    del(id) {
      this.idTwo = id
      this.Visible = true
    },
    // 点击确定删除
    async delSubmitTwo() {
      await delList(this.idTwo)
      this.Visible = false
      this.$message.success('删除成功')
      this.submit()
    }

  }
}
</script>

<style lang="scss" scoped>

.dialog{
  margin-left: 50px;
  margin-right: 50px;
}
.block{
  text-align: right;
}
.el-icon-warning{
  color:#ffb418 ;
}

</style>
